<template>
    <div>
        <div class="container">
            <h2>{{activity.activityName}}</h2>
            <div class="time">
                活动时间：<span>{{activity.activityTime}}</span> &emsp;
                <i class="el-icon-view"></i>&nbsp; <span>{{activity.views}}</span>
            </div>
            <div class="detail ql-editor" v-html="activity.activityDetails">

            </div>
            <el-divider></el-divider>
        </div>
    </div>
</template>

<script>
    import { getRequest } from '../../api';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    export default {
        name: 'ActivityDetails',
        data() {
            return {
                activity: {}
            };
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                const activityId = this.$route.query.activityId;
                const params = { activityId: activityId };
                getRequest('/getActivityDetail', params).then(resp => {
                    if (resp) {
                        this.activity = resp;
                    } else {
                        console.log('校友活动详情获取失败！');
                    }
                });
            }
        }
    };
</script>

<style scoped>
    h2 {
        text-align: center;
        margin-top: 20px;
        color: darkred;
    }

    .time {
        text-align: center;
        font-size: medium;
        margin: 20px 0;
        color: cadetblue;
    }

    .detail {
        text-indent: 2em;
        line-height: 2em;
        font-size: 17px;
        min-height: 500px;
    }

</style>
